import * as React from 'react';
import { withRouter } from 'react-router-dom';
import { Modal } from 'office-ui-fabric-react/lib/Modal';
import { Dialog, DialogType, DialogFooter, PrimaryButton, DefaultButton } from 'office-ui-fabric-react'
import { documentTemplateGetDetail } from '../../services/documentAssistant'
import { parse } from 'query-string';

interface Props {
  onChange?: Function
  location?: any
  id: string
}
// ParsedUrlQuery
export class DocumentAssistDialog extends React.Component<Props,
  {
    search: any,
    content: string,
    hideDialog: boolean
  }
  > {
  constructor(props: Props) {
    super(props);

    const search = parse(props.location.search)
    this.state = {
      search,
      content: '',
      hideDialog: true
    };
  }
  componentDidMount() {
    this.getDocumentDetail()
  };


  // 获取文档详情
  getDocumentDetail = async () => {
    const queryData = { id: this.state.search.id }
    const result = await documentTemplateGetDetail(queryData)
    this.setState({
      content: result.data.contentHtml
    })
  }

  onApplyTemplate = () => {
    if (this.state.search.isHaveBody === 'true') {
      this.setState({ hideDialog: false })
    } else {
      this.applyTemplate()
    }
  }

  // 应用模板
  applyTemplate = () => {
    Office.context.ui.messageParent(this.state.search.id)
  }

  // 关闭弹窗
  closeDialog = () => {
    this.setState({ hideDialog: true })
  }

  public render(): JSX.Element {
    const { id, type } = this.state.search
    return (
      <div className="word-dialog ms-clearfix dialog-word-template">
        <div className="content" dangerouslySetInnerHTML={{ __html: this.state.content }}></div>
        <div className="view-footer box-shadow-dark">
          <PrimaryButton className="pull-right" secondaryText="使用" text="使用" onClick={this.onApplyTemplate} />
        </div>
        <Dialog
          className="view-dialog"
          hidden={this.state.hideDialog}
          onDismiss={this.closeDialog}
          dialogContentProps={{
            type: DialogType.normal,
            title: '',
            subText:
              '使用新文档模板影响较大，是否确定替换？'
          }}
          modalProps={{
            titleAriaId: 'myLabelId',
            subtitleAriaId: 'mySubTextId',
            isBlocking: false,
            containerClassName: 'ms-dialogMainOverride'
          }}
        >
          <DialogFooter>
            <DefaultButton onClick={this.closeDialog} text="取消" />
            <PrimaryButton onClick={this.applyTemplate} text="确定" />
          </DialogFooter>
        </Dialog>
      </div>
    );
  }
}

export default withRouter(DocumentAssistDialog)
